<template>
  <!-- 预警处理/查看 -->
  <div v-if="warnList && warnList.length && inited">
    <el-collapse v-model="activeNames">
      <!-- 遍历模块信息 -->
      <el-collapse-item name="warnInfo">
        <!-- 标题 -->
        <template slot="title">
          <span class="collapse-title">{{
            `项目（${warnList.length}项）`
          }}</span>
        </template>
        <div
          v-for="(iData, index) of warnList"
          :key="index"
          style="margin-bottom: 30px"
          class="factor-div"
        >
          <div class="factor">{{ `${index + 1}、${iData.factorName}` }}</div>
          <el-form
            class="factor-content"
            ref="refWarnForm"
            :model="warnData.arr[index]"
            :rules="hdEdit ? rules : []"
            :label-position="'left'"
            size="mini"
            :readonly="!hdEdit"
          >
            <!-- 预警处理 -->
            <el-row>
              <el-form-item label="测评结果：" label-width="100px">
                <span
                  >{{ iData.score
                  }}<span v-if="iData.factorName !== '阳性项目数'">分</span>，
                  <span>{{ iData.totalRemark }}</span>
                </span>
                <!-- <span v-html="getLevelLabel(iData.level)"></span> -->
              </el-form-item>
              <el-form-item label="得分解释：" label-width="100px">
                <span v-html="iData.explainRemark"></span>
              </el-form-item>
              <el-form-item label="辅导建议：" label-width="100px">
                <span v-html="iData.suggest"></span>
              </el-form-item>
              <el-form-item
                prop="proposalLevel"
                label="建议等级："
                :required="hdEdit"
                label-width="100px"
                v-if="
                  hdRowData.gaugeName !== 'SCL-90症状自评表' &&
                  hdRowData.gaugeName !== '心理健康诊断测验(MHT)'
                    ? true
                    : iData.factorName == '总分'
                    ? true
                    : false
                "
              >
                <el-select
                  v-model="warnData.arr[index].proposalLevel"
                  placeholder="请选择预警等级"
                  :disabled="!hdEdit"
                  clearable
                  @change="levelSelect"
                >
                  <el-option
                    v-for="item in levelOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                prop="coachDecs"
                label="干预措施："
                :required="hdEdit"
                class="measures"
                v-if="
                  hdRowData.gaugeName !== 'SCL-90症状自评表' &&
                  hdRowData.gaugeName !== '心理健康诊断测验(MHT)'
                    ? true
                    : iData.factorName == '总分'
                    ? true
                    : false
                "
              >
                <el-input
                  v-model="warnData.arr[index].coachDecs"
                  placeholder="请填写干预措施"
                  :disabled="!hdEdit"
                  type="textarea"
                  clearable
                  maxlength="2000"
                  rows="2"
                >
                </el-input>
                <span
                  style="
                    color: #999;
                    position: absolute;
                    bottom: -25px;
                    right: 0;
                  "
                  >{{ warnData.arr[index].coachDecs.length }}/2000</span
                >
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="factor">预警结果</div>
        <el-form class="factor-content">
          <el-form-item label="项目名称：">
            <span v-html="hdRowData.projectName"></span>
          </el-form-item>
          <el-form-item label="系统预警等级：">
            <span v-html="getLevelLabel(warnData.systemLevel)"></span>
          </el-form-item>
          <el-form-item label="老师建议等级：">
            <span v-html="getLevelLabel(warnData.proposalLevel)"></span>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import axios from "@/router/axios";
export default {
  props: {
    hdEdit: Boolean, // 当前类型是否编辑的状态
    hdRowData: Object, // 当前类型处理的数据
    warnList: Array, // 预警信息
  },
  data() {
    return {
      inited: false,
      activeNames: "warnInfo",
      // 预警级别选项
      levelOptions: [],
      // 预警处理的数据
      warnData: {
        systemLevel: "", // 系统预警级别
        proposalLevel: "", // 老师建议级别
        arr: this.warnList.map((r) => {
          r["proposalLevel"] &&
            r["proposalLevel"] !== 0 &&
            (r["proposalLevel"] = Number(r["proposalLevel"]));
          return r;
        }),
      },
      // 校验规则
      rules: {
        proposalLevel: [
          { required: true, message: "请选择预警等级", trigger: "change" },
        ],
        coachDecs: [
          { required: true, message: "请填写干预措施", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.initLevelOptions();
    this.warnData["systemLevel"] = this.computedFinishLevel("level"); // 默认系统预警级别
    !this.hdEdit &&
      (this.warnData["proposalLevel"] =
        this.computedFinishLevel("proposalLevel")); // 老师预警级别
  },
  methods: {
    async initLevelOptions() {
      let { data } = await axios({
        url: "/api/blade-system/dict/dictionary?code=warning_level",
        method: "get",
        params: {},
      });
      this.levelOptions = (data.data || []).map((r) => {
        return {
          value: r["dictKey"],
          name: r["dictValue"],
        };
      });
      this.inited = true;
    },
    // 计算最终的预警级别
    computedFinishLevel(prop) {
      let levelArr = this.warnData["arr"].map((r) => Number(r[prop]));
      levelArr = levelArr.filter(
        (value) => typeof value === "number" && value > 0
      ); // 取正数
      return !levelArr.length ? 0 : Math.min(...levelArr); // 取最小
    },
    // 预警层级选择
    levelSelect() {
      this.warnData["proposalLevel"] =
        this.computedFinishLevel("proposalLevel"); // 计算最终的预警等级
    },
    getLevelLabel(level) {
      if (!level && level !== 0) {
        return "";
      }
      return (this.levelOptions.find((r) => level == r["value"]) || {})["name"];
    },
    // 获取数据（外部组件调用）
    getData() {
      return new Promise((resolve, reject) => {
        let refArr = this.$refs["refWarnForm"];
        let valid = true; // 默认校验成功
        // 遍历逐一校验
        refArr.forEach((ref) => {
          ref.validate((isPass) => {
            // 校验不通过
            if (!isPass) {
              valid = false;
            }
          });
        });
        // 校验通过
        if (valid) {
          let data = {
            id: this.hdRowData.userProjectGaugeId,
            realName: this.hdRowData.realName,
            factorList: this.warnData["arr"].map((r) => {
              return {
                id: r.id,
                proposalLevel: r.proposalLevel,
                coachDecs: r.coachDecs,
              };
            }),
          };
          resolve(data);
        }
        // 校验失败
        else {
          this.$nextTick(() => {
            // 定位到第一个错误信息
            let $error = this.$el.getElementsByClassName("is-error")[0];
            $error && $error.scrollIntoView();
          });
          resolve(false);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.col-content {
  label {
    color: #606266;
  }
}

.factor-div {
  ::v-deep.el-form {
    // border-top: 1px solid #646566;
    // border-left: 1px solid #646566;
  }

  // ::v-deep.el-form-item {
  //   border-top: 1px solid #646566;
  //   border-left: 1px solid #646566;
  // }

  // ::v-deep.el-form-item__content {
  //   border-left: 1px solid #646566;
  //   border-right: 1px solid #646566;
  //   padding: 8px 2px;
  // }

  .measures {
    // border-top: 1px solid #646566;
    border-left: none;

    ::v-deep.el-form-item__content {
      border-left: none;
      border-right: none;
    }
  }
}

.factor {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  margin: 8px 0;
  padding: 3px 10px;
  background: url("./img/bg.png") no-repeat;
  background-size: 100%;
  width: 400px;
}
.factor-content {
  background-color: #f5f6f6;
  box-shadow: 0px 0px 2px 2px rgb(215 218 224 / 70%);
  border-radius: 4px;
  padding: 10px 10px 25px 10px;
  .el-form-item {
    margin-bottom: 10px !important;
  }
}
</style>